<!--登录注册-->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>用户登录</title>
    <!--导入css-->
    <link rel="stylesheet" href="admin.css">
    <link rel="stylesheet" href="../../css/Untils/public.css">
</head>

<body>
    <div id="app">
        <!--头部-->
        <header>
            <div class="flex">
                <div class="header_log">
                    <img src="https://ssl1.tuniucdn.com/img/20141206/header/logo.png" class="header_log_img">
                </div>
            </div>
        </header>
        <!--登录模块-->
        <div class="body_bg">
            <div class="flex_right">
                <div class="admin">
                    <div class="flex_wrap">
                        <div id="div_bot_lint" class="flex flex_between padding">
                            <div class="form_header" @click="checkLoginWay()">
                                <a href="javascript:void(0)" class="font_green">账户密码登录</a>
                            </div>
                            <div class="font_line"></div>
                            <div class="form_header" @click="checkLoginWay()">
                                <a href="javascript:void(0)" class="font_black">手机验证码登录</a>
                            </div>
                        </div>
                        <div class="padding_form">

                            <!--消息模块-->
                            <div class="errmsg">
                                <el-alert v-if="isShowMsg" title="" type="error" center @close="alter_close" show-icon>
                                    <template slot="title">
                                        <div>{{errmsg}}</div>
                                    </template>
                                </el-alert>
                                <el-alert v-if="isShowTrue" title="登录成功!" type="success" center @close="alter_success"
                                    show-icon>
                                </el-alert>
                                <div v-else-if="!isShowMsg && !isShowTrue" class="margin_top"></div>
                            </div>

                            <div v-if="isShowLoginWay">
                                <i class="el-icon-user icon_pox"></i>
                                <input class="input_border" v-model="phone" type="text" placeholder="手机号" />
                                <i class="el-icon-unlock icon_pox"></i>
                                <input class="input_border" v-model="code" type="password" placeholder="验证码" />
                                <div style="font-size: 12px;color:darkgray;text-decoration: underline;margin-left: 245px;position: relative;bottom: 20px;"
                                    @click="getPhoneCode()">
                                    <a href="javascript:void(0)">{{text}}</a>
                                </div>
                                <div class="flex flex_between padding_rester ">
                                    <!-- <el-checkbox v-model="isRemmber"></el-checkbox> -->
                                    <!-- <div class="accept_font_common" style="margin-left: -40px;">记住密码</div> -->
                                    <div class="font_rester accept_font_common">
                                        新用户送礼，
                                        <a href="../register/register.html" class="oranger_color">立即注册></a>
                                    </div>
                                </div>
                            </div>
                            <div v-if="!isShowLoginWay">
                                <i class="el-icon-user icon_pox"></i>
                                <input class="input_border" v-model="admin" type="text" placeholder="账号" />
                                <i class="el-icon-unlock icon_pox"></i>
                                <input class="input_border" v-model="password" type="password" placeholder="密码" />
                                <div class="flex flex_between padding_rester ">
                                    <el-checkbox v-model="isRemmber"></el-checkbox>
                                    <div class="accept_font_common" style="margin-left: -40px;">记住密码</div>
                                    <div class="font_rester accept_font_common">
                                        新用户送礼，
                                        <a href="../register/register.html" class="oranger_color">立即注册></a>
                                    </div>
                                </div>
                            </div>


                            <div class="submit">
                                <el-button type="warning" @click="submit" class="submit_btn">登录</el-button>
                            </div>

                            <div class="accept flex">
                                <el-checkbox v-model="accept"></el-checkbox>
                                <div class="accept_font_common">请先阅读并同意我们的</div>
                                <a href="">
                                    <div class="accept_font" style="margin-left: 0px;">
                                        用户协议
                                    </div>
                                </a>
                                <div class="accept_font_common" style="margin-left: 0px;">
                                    和
                                </div>
                                <a href="">
                                    <div class="accept_font" style="margin-left: 0px;">
                                        隐私协议
                                    </div>
                                </a>
                            </div>

                            <div class="admin_type">
                                <div class="flex_wrap">
                                    <div class="admin_type_font">
                                        其它登录方式
                                    </div>
                                    <div class="admin_type_img flex flex_minddle">
                                        <img src="../../img/logo/pay.png" class="admin_type_img_logo">
                                        <a href="" class="admin_type_img_font">支付宝登录</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!--底部-->
        <footer></footer>
    </div>

    <script src="../../js/untils/axios-0.18.0.js"></script>
    <!--引入vue与element-ui-->
    <script src="../../js/untils/vue.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <!--aes加密-->
    <script>
        import aes from '../../js/untils/aes'
        const ss = new 
        new Vue({
            el: "#app", // vue作用域
            data() { // 定义变量区
                return {
                    admin: '', // 账号
                    phone: '', // 手机号
                    password: '', // 密码
                    code: '', // 验证码
                    isRemmber: false, // 是否两天免登录
                    isAccept: false, // 是否选择接受协议
                    input_flag: true, // 判断鼠标是否悬浮在该文本框上
                    accept: false, // 是否同意协议
                    errmsg: "错误提示！！！",
                    isShowMsg: false, // 是否展示操作错误提示框
                    isShowTrue: false, // 是否展示操作成功提示框

                    isShowLoginWay: false, // 是否展示手机验证码登录
                    isSend:false, // 是否禁用发送验证码
                    totalTime: 60, // 倒计时一分钟
                    timer:'', // 定时器
                    text:"获取验证码",
                

                }
            },
            methods: { // 方法区

                // 检验登录方式
                checkLoginWay() {
                    var that = this
                    if (that.isShowLoginWay) that.isShowLoginWay = false
                    else that.isShowLoginWay = true
                },


                // 登录按钮
                submit() {
                    // var that = this
                    // debugger
                    // 是否记住密码
                    if (this.isRemmber) {
                        var userInfo = {
                            admin: this.admin,
                            password: this.password
                        }
                        //                                         存放一星期cookie
                        this.setCookie(this.admin, JSON.stringify(userInfo), 60*24*7)
                        // console.log(JSON.parse(this.getCookie(this.admin)))
                    } else this.delCookie(this.admin)

                    if (this.isShowLoginWay) { // 手机验证码登录
                        if (this.isEmpty(this.phone)) {
                            this.errmsg = "手机号不能为空！";
                            return
                        }

                        if (this.isEmpty(this.code)) {
                            this.errmsg = "验证码不能为空！";
                            return
                        }

                        if (!this.accept) {
                            this.errmsg = "请同意选项卡!"
                            return
                        }

                        // 调用登录
                        this.loginByPhoneCode()

                    } else {
                        // debugger
                        // 账号验证
                        if (this.isEmpty(this.admin)) {
                            this.errmsg = "账号不能为空！";
                            return
                        }

                        // 密码验证
                        if (this.isEmpty(this.password)) {
                            this.errmsg = "密码不能为空！";
                            return
                        }

                        if (!this.accept) {
                            this.errmsg = "请同意选项卡!"
                            return
                        }

                        // 调用登录
                        this.login()

                    }

                },

                // 判断是否为空
                isEmpty(str) {
                    if (str == null || str == '') return true;
                    return false;
                },

                // 操作失败提示框
                alter_close() {
                    this.isShowMsg = false
                },
                // 操作成功提示框
                alter_success() {
                    this.isShowTrue = false
                },

                // 账号手机号密码登录
                login() {
                    // debugger
                    var that = this
                    var user = {
                        userAdmin: that.admin,
                        userId: 0,
                        userNickName: "",
                        userPasssword: that.password,
                        userPhone: that.phone,
                        isRemmber: that.isRemmber
                    }
                    axios({
                        method: "post",
                        // url: "http://localhost:8088/customerUser/userLogin",
                        url: "http://localhost:8080/customerUser/userLogin",
                        data: user
                    }).then(function (resp) {
                        // debugger
                        // console.log(resp.data.data)
                        if (resp.data.code != 200) {
                            that.errmsg = resp.data.msg
                            that.isShowMsg = true; // 展示提示框
                            return
                        } else {
                            // 将用户信息存入到前端缓存中
                            var phone = String(resp.data.data.userPhone)
                            window.localStorage.clear();
                            console.log(resp.data.data)
                            // console.log(JSON.stringify(resp.data.data))
                            window.localStorage.setItem(phone, JSON.stringify(resp.data.data))
                            // sessionStorage.setItem("token",JSON.stringify(resp.data.data.token))
                            console.log("本地缓存" + JSON.parse(window.localStorage.getItem(phone)))
                            // console.log("session中的"+JSON.parse(sessionStorage.getItem("token")))
                            that.isShowTrue = true
                            // 跳转到首页
                            window.location.href = "../index/index.html?phone=" + phone
                            // window.location.href = "../index/index.html"
                        }
                    })
                    // that.isShowAddForm = false
                },

                // 手机验证码登录
                loginByPhoneCode() {
                    // debugger
                    var that = this
                    axios({
                        method: "post",
                        // url: "http://localhost:8088/customerUser/getPhoneCode" + "?phone=" + that
                        url: "http://localhost:8080/customerUser/getPhoneCode" + "?phone=" + that
                            .phone +
                            "&code=" + that.code
                    }).then(function (resp) {
                        console.log(resp)
                        that.admin = resp.data.data
                        if (resp.data.code == 500) {
                            that.errmsg = resp.data.msg
                            return
                        }
                        // 将用户信息存入到前端缓存中
                        // console.log(resp.data.data)
                        window.localStorage.setItem(that.admin.phone, JSON.stringify(resp.data.data))
                        console.log(JSON.parse(localStorage.getItem(that.admin.phone)))
                        // 跳转到首页
                        window.location.href = "../index/index.html?phone=" + that.admin.phone
                        // window.location.href = "../index/index.html"
                    })
                },

                // 获取验证码
                getPhoneCode() {
                    var that = this
                    var phone = that.phone

                    if (that.isSend) return
                    else {
                        that.isSend = true
                        // that.text = that.totalTime+"s"
                        that.timer = setInterval(()=>{
                            that.totalTime-- // 时间自减
                            that.text = that.totalTime+"s"
                            if (that.totalTime <= 0) {
                                clearInterval(that.timer)
                                that.text = '获取验证码'
                                that.totalTime = 60
                                that.isSend = false
                            }
                        },1000)
                    }
                    axios({
                        method: "post",
                        // url: "http://localhost:8088/customerUser/getPhoneCode" + "?phone=" + phone
                        url: "http://localhost:8080/customerUser/getPhoneCode" + "?phone=" + phone
                    }).then(function (resp) {
                        console.log(resp)
                        that.code = resp.data.data
                    })
                },

                // 写入cookie
                setCookie: function (c_name, value, expiremMinutes) {
                    var exdate = new Date();
                    exdate.setTime(exdate.getTime() + expiremMinutes * 60 * 1000);
                    document.cookie = c_name + "=" + escape(value) + ((expiremMinutes == null) ? "" :
                        ";expires=" + exdate.toGMTString());
                },

                // 读取cookie
                getCookie: function (c_name) {
                    if (document.cookie.length > 0) {
                        var c_start = document.cookie.indexOf(c_name + "=");
                        if (c_start != -1) {
                            c_start = c_start + c_name.length + 1;
                            var c_end = document.cookie.indexOf(";", c_start);
                            if (c_end == -1)
                                c_end = document.cookie.length
                            return unescape(document.cookie.substring(c_start, c_end))
                        }
                    }
                    return ""
                },

                // 删除cookie
                delCookie: function (c_name) {
                    var exp = new Date();
                    exp.setTime(exp.getTime() - 1);
                    var cval = this.getCookie(c_name);
                    if (cval != null) {
                        document.cookie = c_name + "=" + cval + ";expires=" + exp.toGMTString();
                    }
                },

            },


            created() {
                
            },

            mounted() {
                this.isShowLoginWay = false
            },

        })
    </script>
</body>

</html>